<template>
  <div :data-bar-cid="cid" class="chart" />
</template>

<script>
/** *
   * 可以考虑每个画一个图分别是独立的chart实例
   * https://www.echartsjs.com/examples/editor.html?c=bar-y-category-stack
   */
// import 'echarts/lib/chart/bar'
// import 'echarts/lib/component/tooltip'
// import 'echarts/lib/component/title'
// import 'echarts/lib/component/legend'
// import echarts from 'echarts'
// import { ChartMixin } from '../mixin'
export default {
  // mixins: [ChartMixin],
  props: {
    yData: {
      type: [String],
      required: true
    },
    cid: {
      type: [String],
      required: true
    }
    // name: {
    //   type: [String],
    //   required: true
    // }
  },
  data() {
    return {
      y: []
    }
  },
  watch: {
    yData(newData) {
      this.setOptions(JSON.parse(newData), this.name)
    }
  },
  mounted() {
    this.chart = this.$chart.init(this.$el)
    this.setOptions(JSON.parse(this.yData), this.name)
  },
  methods: {
    setOptions(newData, name) {
      this.chart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          show: false,
          data: ['利润', '支出', '收入']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'value'
          }
        ],
        yAxis: [
          {
            type: 'category',
            axisTick: { show: false },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
          }
        ],
        series: [
          {
            name: '利润',
            type: 'bar',
            label: {
              normal: {
                show: true,
                position: 'inside'
              }
            },
            data: [200, 170, 240, 244, 200, 220, 210]
          },
          {
            name: '收入',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true
              }
            },
            data: [320, 302, 341, 374, 390, 450, 420]
          },
          {
            name: '支出',
            type: 'bar',
            stack: '总量',
            label: {
              normal: {
                show: true,
                position: 'left'
              }
            },
            data: [-120, -132, -101, -134, -190, -230, -210]
          }
        ]
      })
    }
  }
}
</script>

<style scoped>
  .chart {
    width: 550px;
    height: 800px;
  }
</style>
